
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>sys</title>
            <meta name="keywords" content="">
            <meta name="description" content="">
            <link rel="shortcut icon" href="../favicon.ico">
            <link href="../../css/bootstrap.min-lumen.css" rel="stylesheet">
            <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
            <link href="../../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
            <link href="../../css/animate.css" rel="stylesheet">
            <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
            <link href="../../css/plugins/pageMe/pageMe.css" rel="stylesheet"/>
            <link href="../../css/plugins/progressbar/mprogress.css" rel="stylesheet"/>
            <link href="../../css/plugins/progressbar/style.css" rel="stylesheet"/>
        </head>

        <body class="gray-bg">
        <div id="body" >
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>用户表管理模块</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row row-lg">
                            <div class="clearfix hidden-xs"></div>
                            <div class="col-sm-12">
                                <!-- Example Checkbox Select -->
                                <div class="example-wrap">

                                    <!-- 查询区域 -->
                                    <div id="queryModel" tagId="queryTag">
                                                    <input type="text" v-model="username" placeholder="用户名"
                                                           style="margin-top: 10px"/>&nbsp;
                                                    <input type="text" v-model="createTime" placeholder="创建时间"
                                                           style="margin-top: 10px"/>&nbsp;
                                                    <input type="text" v-model="userLevel" placeholder="1.青铜2.白银3.黄金"
                                                           style="margin-top: 10px"/>&nbsp;
                                                    <input type="text" v-model="phone" placeholder="phone"
                                                           style="margin-top: 10px"/>&nbsp;
                                        <button type="button" class="btn btn-primary btn-sm" @click="queryInfo()">查询</button>&nbsp;
                                        <button type="button" class="btn btn-primary btn-sm" @click="exportExcel()">导出excel</button>
                                    </div>
                                    <!-- 查询区域 end-->

                                    <!-- 添加数据区域 -->
                                    <div style="text-align: right; margin: 8px">
                                        <button tagId="addTag" type="button" class="btn btn-success btn-sm" onclick="addMsg()" style="margin: 8px">
                                            添加数据
                                        </button>
                                    </div>

                                    <!-- 查询结果表格显示区域 -->
                                    <div id="newsContent" class="table-responsive" style="overflow: scroll;" v-cloak>
                                        <table class="table table-hover table-bordered text-nowrap">
                                            <tr>
                                                <th>操作</th>
                                                        <th>主键</th>
                                                        <th>用户名</th>
                                                        <th>密码</th>
                                                        <th>创建时间</th>
                                                        <th>更新时间</th>
                                                        <th>1.青铜2.白银3.黄金</th>
                                                        <th>1男0女</th>
                                                        <th>角色id</th>
                                                        <th>email</th>
                                                        <th>phone</th>
                                                        <th>hobby</th>
                                            </tr>
                                            <tbody id="dataTable">
                                            <tr v-for="data in result">
                                                <td>
                                                <span tagId="upTag"><button type="button" class="btn btn-info btn-sm"
                                                                            @click="upMsg(data.id,'/tbUser/select')">
                                                    更新
                                                </button>&nbsp;</span>
                                                    <span tagId="delTag"><button type="button" class="btn btn-danger btn-sm"
                                                                                 @click="delMsg(data.id,'/tbUser/delete')">
                                                    删除
                                                </button>&nbsp;</span>
                                                </td>
                                                    <td>{{data.id}}</td>
                                                    <td>{{data.username}}</td>
                                                    <td>{{data.password}}</td>
                                                    <td>{{data.createTime}}</td>
                                                    <td>{{data.updateTime}}</td>
                                                    <td>{{data.userLevel}}</td>
                                                    <td>{{data.sex}}</td>
                                                    <td>{{data.roleId}}</td>
                                                    <td>{{data.email}}</td>
                                                    <td>{{data.phone}}</td>
                                                    <td>{{data.hobby}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <div id="pageID" class="page_div"></div>
                                    </div>
                                    <!-- 查询结果表格显示区域 end-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 修改模态框 -->
            <div class="modal fade" id="updateModal" tabindex="-1" roleEntity="dialog" aria-labelledby="updateModalLabel">
                <div class="modal-dialog" roleEntity="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="updateModalLabel">修改信息</h4>
                        </div>
                        <div class="modal-body" id="updateModalBody">
                            <form>
                                        <div class="form-group">
                                            <label for="username-attr" class="control-label">用户名:</label>
                                            <input type="text" class="form-control" id="username-attr"
                                                   v-model="username"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="password-attr" class="control-label">密码:</label>
                                            <input type="text" class="form-control" id="password-attr"
                                                   v-model="password"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="sex-attr" class="control-label">1男0女:</label>
                                            <input type="text" class="form-control" id="sex-attr"
                                                   v-model="sex"/>
                                        </div>
                                    <div class="form-group">
                                    <label  class="control-label">角色名称:</label>
                                    <select v-model="roleId">
                                        <option v-for="r in role" :value="r.id">{{r.roleName}}</option>
                                    </select>
                                    </div>
                                        <div class="form-group">
                                            <label for="email-attr" class="control-label">email:</label>
                                            <input type="text" class="form-control" id="email-attr"
                                                   v-model="email"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="phone-attr" class="control-label">手机:</label>
                                            <input type="text" class="form-control" id="phone-attr"
                                                   v-model="phone"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="hobby-attr" class="control-label">爱好:</label>
                                            <input type="text" class="form-control" id="hobby-attr"
                                                   v-model="hobby"/>
                                        </div>
                                    <div class="form-group">
                                        <input type="hidden" class="form-control" id="id-attr"
                                               v-model="id"/>
                                    </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" @click="confirmUp()">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加模态框 -->
            <div class="modal fade" id="addModal" tabindex="-1" roleEntity="dialog" aria-labelledby="addModalLabel">
                <div class="modal-dialog" roleEntity="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="addModalLabel">添加信息</h4>
                        </div>
                        <div class="modal-body" id="addModalBody">
                            <form>
                                       <!-- <div class="form-group">
                                            <label for="id-insert" class="control-label">主键:</label>
                                            <input type="text" class="form-control" id="id-insert"
                                                   v-model="id"/>
                                        </div>-->
                                        <div class="form-group">
                                            <label for="username-insert" class="control-label">用户名:</label>
                                            <input type="text" class="form-control" id="username-insert"
                                                   v-model="username"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="password-insert" class="control-label">密码:</label>
                                            <input type="text" class="form-control" id="password-insert"
                                                   v-model="password"/>
                                        </div>
                                      <!--  <div class="form-group">
                                            <label for="createTime-insert" class="control-label">创建时间:</label>
                                            <input type="text" class="form-control" id="createTime-insert"
                                                   v-model="createTime"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="updateTime-insert" class="control-label">更新时间:</label>
                                            <input type="text" class="form-control" id="updateTime-insert"
                                                   v-model="updateTime"/>
                                        </div>-->
                                        <div class="form-group">
                                            <label for="userLevel-insert" class="control-label">1.青铜2.白银3.黄金:</label>
                                            <input type="text" class="form-control" id="userLevel-insert"
                                                   v-model="userLevel"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="sex-insert" class="control-label">1男0女:</label>
                                            <input type="text" class="form-control" id="sex-insert"
                                                   v-model="sex"/>
                                        </div>
                                        <div class="form-group">
                                            <label  class="control-label">角色名称:</label>
                                            <select v-model="roleId">
                                                <option v-for="r in role" :value="r.id">{{r.roleName}}</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="email-insert" class="control-label">email:</label>
                                            <input type="text" class="form-control" id="email-insert"
                                                   v-model="email"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="phone-insert" class="control-label">phone:</label>
                                            <input type="text" class="form-control" id="phone-insert"
                                                   v-model="phone"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="hobby-insert" class="control-label">hobby:</label>
                                            <input type="text" class="form-control" id="hobby-insert"
                                                   v-model="hobby"/>
                                        </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" @click="confirmAdd()">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 全局js -->
            <script src="../../js/jquery.min.js?v=2.1.4"></script>
            <script src="../../js/bootstrap.min.js?v=3.3.6"></script>

            <!-- 自定义js -->
            <script src="../../js/content.js?v=1.0.0"></script>


            <!-- Bootstrap table -->
            <script src="../../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
            <script src="../../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
            <script src="../../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

            <!-- Peity -->
            <!-- <script src="../../js/demo/bootstrap-table-demo.js"></script> -->
            <script src="../../js/vue/vue.min.js"></script>
            <script src="../../js/util/ajaxFactory.js"></script>
            <script src="../../js/util/crudVueFactory.js"></script>
            <script src="../../js/util/pageMe.js"></script>
            <script src="../../js/config/config.js"></script>
            <script src="../../js/plugins/layer/layer.min.js"></script>
            <script src="../../js/plugins/progressbar/init-mprogress.js"></script>
            <script src="../../js/plugins/progressbar/mprogress.js"></script>

            <script>
                var currentPage = 1;
                var totalPage;
                var sqlMap = {};
                //排序的数据
                var orderData = [];
                var controllerPrefix = "tbUser";
                var methodName = "likeSelect";

                var queryVue = new Vue({
                    el: '#queryModel',
                    data: {
                      username : '',
                      createTime :'',
                      userLevel : '',
                      phone :''
                },
                methods : {
                    queryInfo : function () {
                        sqlMap = {};
                        sqlMap.username = this.username;
                        sqlMap.createTime = this.createTime;
                        sqlMap.userLevel = this.userLevel;
                        sqlMap.phone = this.phone;
                        currentPage = 1;
                        pageSize = 3;
                        orderData = [];
                        $crud.getDataByCurrentPage();
                    }
                ,
                    exportExcel : function () {

                        //显示进度条
                        InitMprogress();

                        var param = '';

                        for (var key in sqlMap) {
                            if (sqlMap[key] != '') {
                                param += key + "=" + sqlMap[key] + "&";
                            }
                        }

                        window.location.href = basePath + "/" + controllerPrefix
                            + "/exportExcel?" + param;
                        // 进度条消失
                        setTimeout("MprogressEnd()", totalPage / 20 * 1000);
                    }
                }

                })
                ;

                function makeResult(data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i] == null) {
                            data[i] = {};
                            data[i]["id"] = "无";
                            data[i]["username"] = "无";
                            data[i]["password"] = "无";
                            data[i]["createTime"] = "无";
                            data[i]["updateTime"] = "无";
                            data[i]["userLevel"] = "无";
                            data[i]["sex"] = "无";
                            data[i]["roleId"] = "无";
                            data[i]["email"] = "无";
                            data[i]["phone"] = "无";
                            data[i]["hobby"] = "无";
                        }
                    }
                }

                var tableVue = new Vue({
                    el: '#newsContent',
                    data: {
                        result: []
                    },
                    //created:
                    mounted: function () {
                        $crud.getDataByCurrentPage();
                    },
                    methods: {

                        upMsg: function (id, path) {

                            $z.ajaxPost({
                                url: basePath + path,
                                data: {
                            id : id
                        },
                            success : function (data) {
                                $z.dealCommonResult(data, function () {
                                    data = data.data;
                                    upVue.id = data[0]["id"];
                                    upVue.username = data[0]["username"];
                                    upVue.password = data[0]["password"];
                                    upVue.sex = data[0]["sex"];
                                    upVue.email = data[0]["email"];
                                    upVue.phone = data[0]["phone"];
                                    upVue.hobby = data[0]["hobby"];
                                    upVue.roleId = data[0]["roleId"];
                                    $('#updateModal').modal('show');
                                });
                            }
                        })
                            ;
                        },
                        delMsg: function (id, path) {
                            layer.confirm("<em style='color:black'>" + '执行删除后将无法恢复，确定继续吗？' + "</em>", {
                                icon: 3,
                                offset: "200px",
                                title: '温馨提示'
                            }, function (index) {
                                //do something
                                $z.ajaxPost({
                                    url: basePath + path,
                                    data: {
                                id : id
                            },
                                success: function (data) {
                                    $z.dealCommonResult(data, function () {
                                        $crud.getDataByCurrentPage();
                                        layer.alert("<em style='color:black'>" + "删除成功！" + "</em>", {
                                            icon: 6,
                                            offset: "200px",
                                            title: '提示'
                                        });
                                    });
                                }
                            })
                                ;
                                layer.close(index);
                            });
                        }
                    }
                });

                var upVue = new Vue({
                    el: "#updateModal",
                    data: {
                id :
                '',
                username :
                '',
                password :
                '',
                sex :
                '',
                email :
                '',
                phone :
                '',
                hobby :
                ''   ,
                        roleId:'',
                        role:[]             },
                        created(){
                            $z.ajaxPost({
                                url: basePath + "/role/selectAll",
                                success : function (data) {
                                    $z.dealCommonResult(data, function () {
                                        upVue.role=data.data;
                                    });

                                }
                            })
                        },
                methods : {
                    confirmUp : function () {
                        $z.ajaxPost({
                            url: basePath + "/" + controllerPrefix + "/update",
                            data: {
                        id :
                        this.id,
                        username :
                        this.username,
                        password :
                        this.password,
                        sex :
                        this.sex,
                        email :
                        this.email,
                        phone :
                        this.phone,
                        hobby :
                        this.hobby  ,
                                roleId:this.roleId},
                        success : function (data) {
                            $z.dealCommonResult(data, function () {
                                layer.alert("<em style='color:black'>" + "更新成功！" + "</em>", {
                                    icon: 6,
                                    offset: "200px",
                                    title: '提示'
                                });
                                $('#updateModal').modal('hide');
                                $crud.getDataByCurrentPage();
                            });

                        }
                    })
                        ;
                    }
                }
                })
                ;

                function addMsg() {
                    $('#addModal').modal('show');
                }

                var addVue = new Vue({

                    el: "#addModal",
                    data: {
                id : '',
                username : '',
                password : '',
                createTime :'',
                updateTime :'',
                userLevel :'',
                sex :'',
                roleId :'',
                email : '',
                phone : '',
                hobby : '',
                        roleId:'',
                        role:[]
                },
                    created(){
                        $z.ajaxPost({
                            url: basePath + "/role/selectAll",
                            success : function (data) {
                                $z.dealCommonResult(data, function () {
                                    addVue.role=data.data;
                                });

                            }
                        })
                    },
                methods : {
                    confirmAdd : function () {
                        $z.ajaxPost({
                            url: basePath + "/" + controllerPrefix + "/add",
                            data: {
                        id :
                        this.id,
                        username :
                        this.username,
                        password :
                        this.password,
                        createTime :
                        this.createTime,
                        updateTime :
                        this.updateTime,
                        userLevel :
                        this.userLevel,
                        sex :
                        this.sex,
                        roleId :
                        this.roleId,
                        email :
                        this.email,
                        phone :
                        this.phone,
                        hobby :
                        this.hobby    ,
                                roleId:this.roleId},
                        success : function (data) {
                            $z.dealCommonResult(data, function () {
                                layer.alert("<em style='color:black'>" + "添加成功！" + "</em>", {
                                    icon: 6,
                                    offset: "200px",
                                    title: '提示'
                                });
                                $('#addModal').modal('hide');
                                //初始化
                                sqlMap = {};
                                currentPage = 1;
                                $crud.getDataByCurrentPage();
                            });

                        }
                    })
                        ;
                    }
                }
                })
                ;
            </script>
        </div>
        </body>
        </html>
